<script type="text/javascript" src="/luci-static/vssr/emoji.js"></script>
<fieldset class="cbi-section" id="cbi-apply-vssr1" style="display: none;">
    <span class="panel-title">正在切换节点</span>
    <img src="/luci-static/resources/icons/loading.gif" alt="载入中" style="vertical-align:middle">
</fieldset>
<!-- tblsection -->
<fieldset class="cbi-section" id="cbi-<%=self.config%>-<%=self.sectiontype%>">
     <button class="cbi-button  cbi-button-check "><%:Ping All Servers%></button><span class="panel-title"><%:Node list%>    （<%:total%>  
        &nbsp; <%- print(self.des)-%><%:Nodes%>）</span>
    <div class="cbi-section-node">
        <%- local count = 0 -%>
        <div class="cbi-section-table pure-g p-in5">

            <%- local isempty = true
            for i, k in ipairs(self:cfgsections()) do
            section = k
            isempty = false
            scope = { valueheader = "cbi/cell_valueheader", valuefooter = "cbi/cell_valuefooter" }
            -%>

            <div class="pure-u-1-5">
                <div class="cbi-section-table-row " id="cbi-<%=self.config%>-<%=section%>">
                    <div class="loadings hide"></div>
                    <div class="incon type flag-icon <%=self.flag%>" data-setction="<%=section%>">
                        <img class="pure-imgw hidden" src="/luci-static/vssr/img/switch.png">
                        <div class="tp"></div>
                    </div>
                    <div class="incon alias"></div>
                    <%- if self.extedit or self.addremove then -%>
                    <div class="cbi-section-table-cell">
                        <div class="host_con"></div>
                        <a class="cbi-button ssr-button" type="button" value="" onclick="apply_node('<%=section%>')"
                            alt="<%:Apply%>" title="<%:Apply%>"><span class="icon-ok"></span> <%:Apply%></a>
                        <%- if self.extedit then -%>
                        <a class="cbi-button ssr-button " type="button" value="" <%- if type(self.extedit) == "string" then
                           %> onclick="location.href='<%=self.extedit:format(section)%>'" <%- elseif type(self.extedit) == "function" then
                           %> onclick="location.href='<%=self:extedit(section)%>'" <%- end
                           %> alt="<%:Edit%>" title="<%:Edit%>"><span class="icon-edit"></span> <%:Edit%></a>
                        <%- end; if self.addremove then %>
                        <button class="cbi-button  ssr-button" type="submit" value=""
                            onclick="this.form.cbi_state = 'del-section'; return true"
                            name="cbi.rts.<%=self.config%>.<%=k%>" alt="<%:Delete%>" title="<%:Delete%>" /><span
                            class="icon-delete"></span> <%:Delete%></button>
                        <%- end -%>
                    </div>
                    <%- end -%>
                </div>
            </div>
            <%- end -%>

            <%- if isempty then -%>
            <div class="cbi-section-table-row">
                <div colspan="<%=count%>"><em><br /><%:This section contains no values yet%></em></div>
            </div>
            <%- end -%>
        </div>

        <% if self.error then %>
        <div class="cbi-section-error">
            <ul><% for _, c in pairs(self.error) do for _, e in ipairs(c) do -%>
                <li><%=pcdata(e):gsub("\n","<br />")%></li>
                <%- end end %></ul>
        </div>
        <% end %>

        <%- if self.addremove then -%>
        <% if self.template_addremove then include(self.template_addremove) else -%>
        <div class="cbi-section-create cbi-tblsection-create">
            <% if self.anonymous then %>
            <input class="cbi-button cbi-button-add" type="submit" value="<%:Add%>"
                name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" title="<%:Add%>" />
            <% else %>
            <% if self.invalid_cts then -%><div class="cbi-section-error"><% end %>
                <input type="text" class="cbi-section-create-name"
                    id="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>"
                    name="cbi.cts.<%=self.config%>.<%=self.sectiontype%>.<%=section%>" data-type="uciname"
                    data-optional="true" />
                <input class="cbi-button cbi-button-add" type="submit"
                    onclick="this.form.cbi_state = 'add-section'; return true" value="<%:Add%>" title="<%:Add%>" />
                <% if self.invalid_cts then -%>
                <br /><%:Invalid%></div>
            <%- end %>
            <% end %>
        </div>
        <%- end %>
        <%- end -%>
    </div>
</fieldset>
<!-- /tblsection -->
<script type="text/javascript">
    const CONFIG = '<%=self.config%>';
    const CURRENT = '<%=self.current%>';
    const CHANGE_NODE_URL = '<%=luci.dispatcher.build_url("admin", "vpn", "vssr","change")%>';
    const CHECK_PING_URL = '<%=luci.dispatcher.build_url("admin", "vpn", "vssr","checkport")%>';
    const SWITCH_NODE_URL = '<%=luci.dispatcher.build_url("admin", "vpn", "vssr","switch")%>';

    var servers = JSON.parse('<%= self.servers%>'.replace(/\t/g, ""));
    var ajaxArray = new Array();

    //渲染节点列表
    $.each(servers, function (i, val) {
        var id = '#cbi-' + CONFIG + '-' + val.name;
        if (val.name == CURRENT) {
            $(id).addClass("fast");
        }
        val.flag = (val.flag == undefined) ? "un" : val.flag;
        $(id).find(".type .tp").text(val.type);
        $(id).find(".type").addClass("flag-icon-" + val.flag);
        $(id).find(".alias").text(val.alias);
        $(id).attr("server", val.server);
        $(id).attr("server_port", val.server_port);
        if (val.switch_enable == "1") {
            $(id).find(".pure-imgw").removeClass("hidden");
        } else {
            $(id).find(".pure-imgw").addClass("hidden");
        }
    });

    //转换节点名称的Emoji显示
    $(".alias").emoji();
    //适配方框的大小
    $(".flag-icon").each(function (index, el) {
        if ($(el).height < 60) {
            $(el).parent.height(60);
            $(el).width(60)
        } else {
            $(el).width($(el).height());
        }
    });
    //切换节点
    function apply_node(node) {
        $("#cbi-apply-vssr1").show(); //显示应用中
        $.each(ajaxArray, function (n, value) { value.abort(); }) //中断所有的ajax请求
        $.get(CHANGE_NODE_URL, { set: node },
            function (data, status) {
                $("#cbi-apply-vssr1").hide(); //隐藏应用中
                if (data.status) {
                    var id = '#cbi-<%=self.config%>-' + node;
                    $(".cbi-section-table-row").removeClass("fast");
                    $(id).addClass("fast");
                }
            });
    }

    //设定自动切换台
    $(".incon").click(function () {
        $.each(ajaxArray, function (n, value) { value.abort(); }) //中断所有的ajax请求
        $node_switch_icon = $(this).find(".pure-imgw");
        $node_target = $(this).attr("data-setction");
        $.post(SWITCH_NODE_URL, { node: $node_target }, function (data) {
            if(data.status){
                if(data.switch){
                    $node_switch_icon.removeClass("hidden");
                }else{
                    $node_switch_icon.addClass("hidden");
                }
            }else{
                alert("请求出错！")
            }
        }, "json");
    })

    //检测所有节点延迟
    function check() {
        $(".host_con").html("");
        ajaxArray = [];
        $(".pure-u-1-5").each(function () {
            host = $(this).find(".cbi-section-table-row ").attr("server");
            port = $(this).find(".cbi-section-table-row ").attr("server_port");
            $(".host_con").text("");
            check_port(host, port, this);
        });
    }

    //检测单个节点延迟
    function check_port(hosts, ports, target) {
        $.ajaxSettings.async = true;
        var axhr = $.get(CHECK_PING_URL, { host: hosts, port: ports },
            function (data, status) {
                var host_con = $(target).find(".host_con");
                host_con.removeClass("fast");
                host_con.removeClass("middle");
                host_con.removeClass("slow");
                host_con.removeClass("nopass");
                if (data.ret == 1) {
                    if (data.used == "") {
                        host_con.addClass("nopass");
                        host_con.text("Error");
                    } else if (data.used <= 80) {
                        host_con.addClass("fast");
                        host_con.text(data.used + "ms");
                    } else if (data.used > 80 && data.used <= 200) {
                        host_con.addClass("middle");
                        host_con.text(data.used + "ms");
                    } else if (data.used > 200) {
                        host_con.addClass("slow");
                        host_con.text(data.used + "ms");
                    }
                } else {
                    host_con.addClass("nopass");
                    host_con.text("Error");
                }
            });
        ajaxArray.push(axhr);
    }

    $(document).ready(function () {
        setTimeout(function () { check(); }, 500); //延迟500MS开始检测
        $(".cbi-page-actions").hide(); //隐藏底部保存提交按钮
        $(".cbi-button-check").click(function () {
            check();
            return false;
        });
    });

</script>